<template>
  <view>
    <view class="firstimgbox">
      <view class="firstimg" v-for="(item2, index2) in list" @click.stop="lookimage(item2, index2)">
        <image v-if="util.isImage(item2)" :src="$getimgsrc(item2)" mode="aspectFill"></image>
        <view class="" style="width: 210rpx; height: 210rpx; border-radius: 20rpx; position: relative" v-else>
          <video
            class="_video"
            :autoplay="false"
            :src="img_url + item2"
            :controls="true"
            :show-center-play-btn="false"
            :show-fullscreen-btn="false"
            :show-play-btn="false"
            :show-loading="false"
            :enable-progress-gesture="false"
            :poster="img_url + item2 + '?spm=qipa250&x-oss-process=video/snapshot,t_7000,f_jpg,w_800,h_600,m_fast'"
          >
            <!-- <cover-view style="position: relative;top: 50%;transform: translateY(-50%);">
							<u-icon name="play-left-fill" color="#ffffff" size="50"></u-icon>
						</cover-view> -->
          </video>
        </view>
      </view>
    </view>
    <uni-popup ref="imagepopup" type="center">
      <view>
        <video :src="videourl" style="width: 690rpx; height: 500rpx"></video>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      videourl: '',
      img_url: this.img_url
    };
  },
  methods: {
    lookimage(item, index) {
      if (this.util.isImage(item)) {
        this.util.lookImg(this.$getimgsrc(this.list[index]), index);
      } else {
        this.videourl = this.$getimgsrc(item);
        this.$refs.imagepopup.open();
      }
    }
  }
};
</script>

<style scoped lang="scss">
.firstimgbox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  .firstimg {
    width: 33.3%;
    text-align: center;

    image {
      width: 210rpx;
      height: 210rpx;
      border-radius: 20rpx;
    }
    ._video {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background-color: #000;
    }
  }
}
</style>
